<template>
  <chartTemplate ref="chartTemplate" :option="option"></chartTemplate>
</template>
<script>
import { mapState } from 'vuex'
import chartTemplate from '@/assets/js/common/chartTemplatePlugin/chartTemplate'
export default {
  name: 'homeLeftCenter',
  data() {
    return {
      seriesData: [],
      xData: [],
      barColor: [
        ['rgba(9,109,217,1)', 'rgba(9,109,217,0)'],
        ['rgba(16, 235, 277,1)', 'rgba(16, 235, 277,0)']
      ]
    }
  },
  props: {
    params: {
      type: Object,
      default: () => {}
    }
  },
  mounted() {},
  computed: {
    ...mapState(['dataSet']),
    option() {
      let option = this.getOption()
      return option
    }
  },
  watch: {
    params: {
      handler: function (v, v1) {
        this.init()
      }
    }
  },
  methods: {
    init() {
      this.handleData()
      let tl = new TimelineMax({})
      tl.addLabel('start').add(this.$refs.chartTemplate.init(), 'start')
      return tl
    },
    getOption() {
      let option = {
        tooltip: {
          backgroundColor: 'rgba(17,95,234,0)',
          trigger: 'axis',
          borderWidth: 0,
          padding: 0,
          confine: true,
          textStyle: {
            color: '#fff'
          },

          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow',
            shadowStyle: {
              color: 'rgba(17,95,234,0)'
            }
          },
          className: 'pictorialBar-hover-bg',
          position: (point, params, dom, rect, size) => {
            return [point[0], 30]
          },
          formatter: (params) => {
            let dom = `
              <div style='padding: 10px 0 5px 20px;'>${params[0].name}</div>`
            dom += ` <div  style='padding-left: 20px;line-height: 20px;'><span style="margin-right: 3px;">${this.fomatterNum(
              params[0].value - 0
            )}</span>${this.params.yUnit}</div>`
            return dom
          }
        },
        grid: {
          bottom: 30,
          right: 10,
          left: 70
        },
        legend: {
          show: false
        },
        xAxis: {
          type: 'category',
          name: this.params.xUnit,
          position: 'end',
          axisLine: {
            show: false,
            lineStyle: {
              color: '#4d5b97',
              width: 1
            }
          },
          axisTick: { show: false },
          axisLabel: { color: '#f0f0f0' },
          nameTextStyle: {
            color: '#f0f0f0',
            width: 30,
            height: 30,
            align: 'right',
            padding: [8, 10, 20, 0],
            verticalAlign: 'top'
          },
          data: this.xData
        },
        yAxis: {
          type: 'value',
          name: this.params.yUnit,
          nameTextStyle: {
            color: 'rgba(240,240,240,.7)',
            width: 20,
            align: 'right',
            padding: [0, 20, 0, 0]
          },
          axisLine: {
            show: false
          },
          axisTick: { show: false },
          axisLabel: {
            fontSize: 12,
            color: 'rgba(240,240,240,.7)'
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,225,255,.2)'
            }
          }
        },
        series: [
          {
            name: '',
            type: 'pictorialBar',
            barWidth: '80%',
            label: {
              show: false
            },
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: this.barColor[0][0] // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: this.barColor[0][1] // 100% 处的颜色
                  }
                ],
                globalCoord: false // 缺省为 false
              } //渐变颜色
            },
            emphasis: {
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: this.barColor[1][0] // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: this.barColor[1][1] // 100% 处的颜色
                    }
                  ],
                  globalCoord: false // 缺省为 false
                } //渐变颜色
              }
            },
            symbol:
              'path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z',

            data: this.seriesData
          }
        ]
      }
      return option
    },
    handleData() {
      let arr = [...this.params.data],
        xData = [],
        data = []
      for (let i = 0; i < arr.length; i++) {
        xData.push(arr[i].name)
        data.push(arr[i].entityNum)
      }
      this.xData = xData
      this.seriesData = data
    },
    fomatterNum(num) {
      if (typeof num === 'number') {
        return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
      } else {
        return '-'
      }
    }
  },
  components: { chartTemplate }
}
</script>
<style lang="scss">
.pictorialBar-hover-bg {
  position: absolute;
  width: 89px;
  height: 200px;
  background: url('../../assets/imgs/project-img/line/hover-bg.png') no-repeat;
  background-size: contain;
  display: none;
  box-shadow: rgb(0 0 0 / 0%) 1px 2px 10px !important;
}
</style>
